<template>
    <div class="container">
        <div class="top">
            <a-button type="primary" class="list-menu-btn" @click="onCategoryEditClick({id: 0, name: ''})">新建分类</a-button>
        </div>
        <div class="cards">
            <a-card
                style="width: 300px; height: 160px; margin-right: 10px; margin-bottom: 10px;"
                v-for="(v, k) in categorys"
                :key="k"
                hoverable
            >
                <span slot="title" @click="onCardClick(v.id)">{{v.name}}</span>
                <div slot="extra">
                    <a-button type="primary" class="list-menu-btn" @click="onCategoryEditClick(v)">编辑</a-button>
                    <a-popconfirm placement="top" ok-text="确定" cancel-text="取消" @confirm="commitDeleteCategory(v.id)">
                        <template slot="title">
                            <p>确定要删除这个分类吗</p>
                        </template>
                        <a-button type="danger" class="list-menu-btn">删除</a-button>
                    </a-popconfirm>
                </div>
                <p @click="onCardClick(v.id)">{{ v.count == 0 ? '没有文章' : `${v.count} 篇文章` }}</p>
                <p @click="onCardClick(v.id)">创建于 {{ v.create_time }}</p>
            </a-card>
            <div class="empty" v-if="categorys.length == 0">没有分类</div>
        </div>
        <a-modal
            :title="edit.data.id > 0 ? '编辑分类' : '新建分类'"
            :visible="edit.show"
            :confirm-loading="edit.loading"
            @ok="commitEdit"
            @cancel="onCategoryEditCancel"
            :closable="false"
            okText="保存"
            cancelText="取消"
        >
            <a-input v-model="edit.data.name"></a-input>
        </a-modal>
    </div>
</template>
<script>
import { getCategoryList, saveCategory, deleteCategory, addCategory } from '../../../api/blog.js'
export default {
    name: 'Categorys',
    data() {return {
        categorys: [],
        edit: {
            show: false,
            data: {
                id: 0,
                name: ''
            },
            loading: false
        }
    }},
    created() {
        this.getCategoryList()
    },
    mounted() {
        
    },
    methods: {
        getCategoryList() {
            getCategoryList().then(res => {
                this.categorys = res.data
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg)
            })
        },
        onCardClick(id) {
            this.$router.push({
                path: '/blog/blogs',
                query: {
                    id: id
                }
            })
        },
        onCategoryEditClick(v) {
            this.edit = {
                show: true,
                data: {
                    id: v.id,
                    name: v.name
                },
                loading: false
            }
        },
        onCategoryEditCancel() {
            this.edit = {
                show: false,
                data: {
                    id: 0,
                    name: ''
                },
                loading: false
            }
        },
        commitEdit() {
            let d = {}
            if (this.edit.data.id > 0) {
                d.id = this.edit.data.id
            }
            if (!this.edit.data.name) {
                this.$message.error('请输入分类名')
                return
            }
            d.name = this.edit.data.name
            this.edit.loading = true

            const req = this.edit.data.id > 0 ? saveCategory : addCategory
            req(d).then(res => {
                this.onCategoryEditCancel()
                this.$message.success('修改成功')
                this.getCategoryList()
            }).catch(e => {
                this.edit.loading = false
                this.$message.error(e.msg || '网络错误')
                console.error(e)
            })
        },
        commitDeleteCategory(id) {
            deleteCategory({
                id: id
            }).then(res => {
                this.$message.success('删除成功')
                this.getCategoryList()
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '网络错误')
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    padding: 40px 0 0 20px;
    .top {
        margin: 10px 0;
    }
    .cards {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .empty {
        width: 100%;
        text-align: center;
        color: gray;
        font-size: 13px;
    }
}
.list-menu {
    margin-right: 10px;
}
.ant-pagination-next {
    display: none !important;
}
</style>


